<template>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="修改类型"
        prop="update_type"
        class="label-right-align"
        label-width="120px"
      >
        <el-radio-group v-model="formData.update_type">
          <el-radio value="price">基础价格</el-radio>
          <el-radio value="discount">折扣率</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="修改方式"
        prop="update_method"
        class="label-right-align"
        label-width="120px"
      >
        <el-radio-group v-model="formData.update_method">
          <el-radio value="set">设置</el-radio>
          <el-radio value="increase">增加</el-radio>
          <el-radio value="decrease">减少</el-radio>
          <el-radio value="percent">百分比调整</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="价格值"
        prop="update_value"
        class="required label-right-align"
        label-width="120px"
      >
        <div>
          <el-input-number
            v-model="formData.update_value"
            :style="{ width: '300px' }"
          ></el-input-number>
          <div>
            <el-text color="#909399" size="small">{{ setTip }}</el-text>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="选中的策略"
        prop="discount_rate"
        class="label-right-align"
        label-width="120px"
      >
        <div style="display: flex">
          已选中{{ selectedRows.length }}个价格策略
          <el-popover title="" placement="bottom" width="400px">
            <template #reference>
              <el-button size="small">查看详情</el-button>
            </template>
            <el-scrollbar max-height="300px">
              <div v-for="(item, index) in selectedRows" :key="index" style="padding: 5px">
                {{
                  index +
                  1 +
                  " " +
                  item.brand +
                  " " +
                  item.model +
                  " " +
                  item.product_name +
                  " " +
                  item.base_price
                }}
              </div>
            </el-scrollbar>
          </el-popover>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, inject, computed } from "vue";
import { ElMessage } from "element-plus";
import { batchUpdatePriceApi } from "@/api/carfilm/quote";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("批量修改价格");
const selectedRows = inject("selectedRows") as any;
const formData = ref({
  ids: [] as number[],
  update_type: "price" as "price" | "discount",
  update_value: 0.0,
  update_method: "set" as "set" | "increase" | "decrease" | "percent",
});
const setTip = computed(() => {
  switch (formData.value.update_method) {
    case "set":
      return "设置为指定价格";
    case "increase":
      return "增加指定金额";
    case "decrease":
      return "减少指定金额";
    case "percent":
      return "按百分比调整，如5表示增加5%";
  }
});
const rules = reactive({});

const emits = defineEmits(["getTable"]);

function submitForm() {
  formRef.value.validate().then(() => {
    batchUpdatePriceApi(formData.value)
      .then((res) => {
        ElMessage.success("批量修改成功");
        emits("getTable");
        dialogClose();
      })
      .catch((err) => {});
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = () => {
  dialogFormVisible.value = true;
  formData.value.ids = selectedRows.value.map((item: any) => {
    return item.id;
  });
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    ids: [] as number[],
    update_type: "price" as "price" | "discount",
    update_value: 0.0,
    update_method: "set" as "set" | "increase" | "decrease" | "percent",
  };
  dialogFormVisible.value = false;
};

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.letter-box {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .letter-item {
    padding: 5px 10px;
    margin-top: 5px;
    cursor: pointer;
    margin-right: 5px;
    border: 1px solid #d9ecff;
    border-radius: 4px;

    &.active {
      background-color: #409eff;
      color: #fff;
    }
  }
}

.count-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.brand-item {
  margin-bottom: 35px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 24px;
  transition: all 0.3s;

  .brand-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;

    .brand-left {
      display: flex;
      align-items: center;

      .brand-name {
        margin: 0 15px 0 15px;
        font-size: 18px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
}

.tag-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;

  .el-tag {
    margin-right: 5px;
  }
}
</style>
